<template>
  <div class="file">
    <div class="top">
      <div class="iconfont icon-angle-left" @click="back"></div>
      <div class="disk" style="width: 100px;">
        <el-select v-model="state.diskName" @change="changeDisk" placeholder="选择">
          <el-option v-for="(x, y) in state.disks" :key="y" :value="x">{{ x }}</el-option>
        </el-select>
      </div>
      <div class="path"> : /{{ state.urls.join('/') }}</div>
      <div class="iconfont icon-angle-right" @click="goPath"></div>
    </div>
    <div class="control">
      <ul>
        <li>新建</li>
        <li>复制</li>
        <li>剪切</li>
        <li>重命名</li>
        <li>批量</li>
        <li>排列</li>
        <li>复制路径</li>
      </ul>
    </div>
    <div class="file-list">
      <template v-if="state.files.length > 0">
        <template v-for="(x, y) in state.files" :key="y">
          <div v-if="showInclueds('code', x)" :title="x" @click="showTxt(x)">
            <div class="iconfont icon-bianjiwenzhang_huaban" :style="{ backgroundColor: '#2820a2' }"></div>
            <div class="word ellipsis">{{ x }}</div>
          </div>
          <div v-else-if="x.includes('.mp3')" :title="x">
            <div class="iconfont icon-yinle" :style="{ backgroundColor: '#55e544' }"></div>
            <div class="word ellipsis">{{ x }}</div>
          </div>
          <div v-else-if="showInclueds('pic', x)" :title="x" @click="showImg(x)">
            <div class="iconfont icon-tupian" :style="{ backgroundColor: '#9039ad' }"></div>
            <div class="word ellipsis">{{ x }}</div>
          </div>
          <div v-else-if="showInclueds('exe', x)" @click="openSoft(x)" :title="x">
            <div class="iconfont icon-suolvetuxianshi" :style="{ backgroundColor: '#f039ad' }"></div>
            <div class="word ellipsis">{{ x }}</div>
          </div>
          <div v-else-if="showInclueds('video', x)" :title="x">
            <div class="iconfont icon-bofang1" :style="{ backgroundColor: '#f7d94c' }"></div>
            <div class="word ellipsis">{{ x }}</div>
          </div>
          <div v-else-if="showInclueds('doc', x)" :title="x" @click="showFile(x)">
            <div class="iconfont icon-suolvetuxianshi" :style="{ backgroundColor: '#5b22e9' }"></div>
            <div class="word ellipsis">{{ x }}</div>
          </div>
          <div v-else-if="x.includes('.')" :title="x">
            <div class="iconfont icon-suolvetuxianshi" :style="{ backgroundColor: '#5b9b09' }"></div>
            <div class="word ellipsis">{{ x }}</div>
          </div>
          <div v-else @click="selectFile(y)" :title="x">
            <div class="iconfont icon-sucai" :style="{ backgroundColor: '#ebaf4a' }"></div>
            <div class="word ellipsis">{{ x }}</div>
          </div>
        </template>
      </template>
      <div v-else>此文件夹为空</div>
    </div>
    <div class="dialog">
      <el-dialog :title="state.title" v-model="showOption.txt" width="80%">
        <pre class="showCode"><code>{{ content }}</code></pre>
      </el-dialog>
      <el-dialog :title="state.title" v-model="showOption.img" width="600">
        <img :src="state.url" width="100%" mode="heightMode">
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance()
const state = reactive({
  disks: ['C', 'D', 'E', 'F', 'G', 'H'],
  diskIdx: 0,
  diskName: 'D',
  urls: [],
  files: [],
  fileIdx: 0,
  open: false,
  url: ''
})



const includesArr = {
  pic: 'img|png|svg|jpeg|gif',
  video: 'mp4|mkv|rmvb',
  code: 'vue|js|txt|md',
  exe: 'exe|bat|lnk|zip',
  doc: 'doc|pdf|xlsx'
}

function showInclueds(str, value) {
  let flag = false
  includesArr[str].split('|').map(x => {
    if (value.includes("." + x)) {
      flag = true
    }
  })
  return flag
}

const showOption = reactive({
  txt: false,
  img: false
})

const content = ref('')

const path = computed(() => {
  return state.diskName + ':/' + state.urls.join('/')
})

function changeDisk(e) {
  state.urls = []
  getFiles()
}

function getFiles() {
  proxy.$system.readDir(path.value).then(res => {
    if (typeof (res) == 'object') {
      state.files = res
    }
  }).catch(err => {
    state.urls.pop();
    proxy.$global.error(err)
  })
}

function showTxt(e) {
  state.title = e
  showOption.txt = true
  proxy.$system.readFile(path.value + '/' + e).then(res => {
    content.value = res
  })
}

function showImg(e) {
  state.title = e
  showOption.img = true
  state.url = path.value + '/' + e
  // console.log(state.url)
}

function showFile(x) {
  window.open(path.value + '/' + x)
}

function selectFile(y) {
  state.urls.push(state.files[y])
  // console.log(state)
  getFiles()
}

function back() {
  if (state.urls.length > 0) {
    state.urls.pop();
  }
  getFiles()
}

function openSoft(x) {
  proxy.$system.openFile(path.value + '/' + x)
}

function goPath() {
  proxy.$system.openFile(path.value)
}

onMounted(() => {
  getFiles()
})
</script>

<style scoped lang="scss">
.file {
  width: 100%;
  height: 100%;
  // background-color: #fff;
  // color: #000;

  .top {
    display: flex;

    .iconfont {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      cursor: pointer;
    }

    .disk,
    .path {
      display: flex;
      align-items: center;
    }

    .disk {
      margin-right: 10px;
    }
  }

  .control {
    padding: 0 20px;

    ul {
      display: flex;

      li {
        display: flex;
        align-items: center;
        margin-right: 10px;
      }
    }
  }

  .file-list{
    display: flex;
    flex-wrap: wrap;

    >div {
      width: 200px;
      height: 40px;
      cursor: pointer;
      display: flex;
      margin: 10px;

      .iconfont {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .word {
        width: 160px;
        height: 40px;
        font-size: 16px;
        display: flex;
        align-items: center;
        text-indent: 10px;
      }

      .img {
        width: 100px;
        height: 100px;

        img {
          width: 100%;
        }
      }
    }

    .active {
      color: red;
    }
  }

  .showCode {
    background-color: black;
    color: #fff;
  }
}
</style>
